import React, {PureComponent} from 'react';
import {StyleSheet, View, Text, ImageBackground} from 'react-native';

export default class extends PureComponent {
    render() {
        const {item} = this.props;
        return (
            <View style={styles.container}>
                <Text numberOfLines={2} style={styles.title}>{item.title}</Text>
                <View style={styles.volume}>
                    <Text style={styles.gray}>月销{item.volume}</Text>
                </View>
                <View style={styles.bottom}>
                    <View style={styles.priceWrap}>
                        <Text style={styles.red}>￥<Text style={styles.newPrice}>{item.tao_ke_price}</Text></Text>
                        <Text style={styles.oldPrice}>天猫价￥{item.zk_final_price}</Text>
                    </View>
                    <ImageBackground source={require('../../../images/coupon_bg.png')}
                                     style={{width: 51, height: 22, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={styles.couponText} fontVariant="small-caps">券￥{item.coupon_value}</Text>
                    </ImageBackground>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        paddingTop: 7,
        paddingLeft: 9,
        paddingRight: 9,
        paddingBottom: 12
    },
    title: {
        fontSize: 12,
        color: '#333',
        lineHeight: 14,
        height: 32,
        marginBottom: 6
    },
    volume: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        height: 16,
    },
    gray: {
        color: '#939393',
        fontSize: 10
    },
    bottom: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginTop: 6
    },
    priceWrap: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-end'
    },
    red: {
        color: '#e83018',
        fontSize: 10
    },
    newPrice: {
        fontSize: 15
    },
    oldPrice: {
        color: '#939393',
        fontSize: 10,
        marginLeft: 6
    },
    couponText: {
        fontSize: 11,
        textAlign: 'center',
        color: '#fff6cc'
    }
});
